<template>
  <div class="question-page">
    <abstract-table-page
      ref="pager"
      :fetcher="fetcher"
      :phone-columns="columns.phone"
      :pc-columns="columns.pc"
      @click-row="clickRow"
    >
      <template #phone="{ row }">
        <td class="is-center field-no-padding">{{ row.id }}</td>
        <td class="is-left"><div class="text-one-line">{{ row.text }}</div></td>
        <td class="is-center"><status-badge :status="row.status" /></td>
        <td class="is-right" :title="buildRatioText(row)"><ratio-bar :pass="row.pass_count" :fail="row.fail_count" /></td>
      </template>
      <template #pc="{ row }">
        <td class="is-center field-no-padding">{{ row.id }}</td>
        <td class="is-center field-low-padding">{{ getRootTextById(row.type_id) }}</td>
        <td class="is-center"><style-badge :qstyle="row.style" /></td>
        <td class="is-left"><div class="text-one-line">{{ row.text }}</div></td>
        <td class="is-center"><status-badge :status="row.status" /></td>
        <td class="is-right" :title="buildRatioText(row)"><ratio-bar :pass="row.pass_count" :fail="row.fail_count" /></td>
      </template>
    </abstract-table-page>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import AbstractTablePage from './AbstractTablePage'
import StatusBadge from './StatusBadge'
import StyleBadge from './StyleBadge'
import RatioBar from './RatioBar'

export default {
  name: 'QuestionPage',
  components: {
    AbstractTablePage,
    StatusBadge,
    StyleBadge,
    RatioBar
  },
  props: {
    fetcher: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      columns: {
        phone: [
          { title: 'ID', width: 40, name: 'id', class: 'field-no-padding', align: 'center' },
          { title: '题干', name: 'text', align: 'center' },
          { title: '审核结果', name: 'status', width: 100, align: 'center' },
          { title: '正确率', name: 'ratio', width: 100, align: 'center' }
        ],
        pc: [
          { title: 'ID', width: 40, name: 'id', class: 'field-no-padding', align: 'center' },
          { title: '类型', width: 60, name: 'type', class: 'field-low-padding', align: 'center' },
          { title: '形式', width: 100, name: 'style', align: 'center' },
          { title: '题干', name: 'text', align: 'left' },
          { title: '审核结果', name: 'status', width: 100, align: 'center' },
          { title: '正确率', name: 'ratio', width: 100, align: 'center' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters({
      types: 'types'
    })
  },
  methods: {
    // 刷新
    refresh() {
      this.$refs.pager.refresh()
    },
    // 选中某一行
    clickRow(row) {
      this.$emit('click-row', row)
    },
    getRootTextById(id) {
      const type = this.types.find(item => item.id === id)
      const root = this.types.find(item => item.id === type.root_type_id)
      return root ? root.type_name : '未知类型'
    },
    buildRatioText(question) {
      const pass = question.pass_count
      const fail = question.fail_count
      const total = pass + fail
      return `${pass} / ${total}`
    }
  }
}
</script>
